<template>
  <view>
    <u-subsection fontSize="16px" :list="list" :current="curNow" @change="sectionChange"></u-subsection>
    <custom-book-list :list="orderList" @update="init"></custom-book-list>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {onLoad, onReachBottom} from "@dcloudio/uni-app";
import {useStore} from "vuex";
import type {PageOrderReqVO, PageOrderRespVO} from "@/interfaces/museum";
import {usePageOrdersData} from "@/services/api";

const store = useStore()
const list = ref<string[]>(['全部','已预约','已完成','已取消'])
const curNow= ref<number>(0)
const sectionChange = (index:number) => {
  curNow.value = index
  orderList.value = []
  init()
}
const pageOrderReq = ref<PageOrderReqVO>({
  size: 10,
  current: 1
})
const orderList = ref<PageOrderRespVO[]>([])
const init = async () => {
  pageOrderReq.value.username = store.getters["auth/getUsername"]
  pageOrderReq.value.status = curNow.value
  const {data: res} = await usePageOrdersData(pageOrderReq.value)
  orderList.value = [...orderList.value, ...res.list]
}
onLoad((query)=>{
  curNow.value = parseInt(query?.index)
  init()
})
onReachBottom(() => {
  pageOrderReq.value.current += 1
  init()
})
</script>


<style scoped lang="scss">

</style>
